<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <title>聊天页面-信息列表</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/common.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui-pull-refresh.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <style>
        html,
        body {
            width: 100%;
            min-height: 100%;
            background: #f7f7f7;
            line-height: 1;
        }
        /*搜索按钮*/

        .search_box {
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 0.45rem 0.75rem;
            background-color: #fff;
            padding: 0.4rem 0;
            border-radius: 0.1rem;
        }

        .search_box img {
            width: 0.625rem;
            margin-right: 0.25rem;
        }

        .search_box span {
            font-size: 0.7rem;
            color: #999;
        }
        /*群组列表*/

        .my_chat_group_list {
            display: flex;
            align-items: center;
            padding: 0.5rem 0.75rem;
            background-color: #fff;
            margin-bottom: 0.05rem;
        }

        .my_chat_group_list img {
            width: 1.5rem;
            margin-right: 0.75rem;
        }

        .my_chat_group_list .group_name {
            font-size: 0.8rem;
            color: #333;
        }


        .img_outer {
            width: 1.5rem;
            height: 1.5rem;
            font-size: 0;
            border-radius: 50%;
            overflow: hidden;
        }

        .img_outer::before,
        .img_outer::after {
            content: '';
            display: block;
            clear: both;
        }

        .img_outer>div {
            float: left;
            border: 1px solid #fff;
            box-sizing: border-box;
        }

        .img_outer2>div {
            width: 50%;
            height: 100%;
        }

        .img_outer3>div:first-child {
            width: 50%;
            height: 100%;
        }

        .img_outer3>div {
            width: 50%;
            height: 50%;
        }

        .img_outer4>div {
            width: 50%;
            height: 50%;
        }
    </style>
</head>

<body>
    <div class="app">
        <div class="my_chat_group">
            <div class="search_box">
                <img src="../../image/four/search.png" alt="">
                <span>搜索</span>
            </div>


            <ul>
                <li v-for="group_data in group_list" class="my_chat_group_list" @click="open_chat_win('group',group_data.groupchat_id,group_data.name)">
                    <!-- <img src="../../image/four/test.jpg" alt=""> -->
                    <div class="img_outer" :class="group_data.img.length < 4 ? 'img_outer' + group_data.img.length : 'img_outer4'" style="margin-right:0.75rem;">
                        <div v-for="img_src in group_data.img" :style="'background:url('+img_src+') no-repeat center/cover'"></div>
                    </div>
                    <span class="group_name">{{group_data.name}}</span>
                </li>
            </ul>
        </div>
    </div>

</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/jquery.min.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript" src="../../script/utils.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/aui-tab.js"></script>
<script type="text/javascript" src="../../script/aui-scroll.js"></script>
<script type="text/javascript" src="../../script/aui-pull-refresh.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript">
    apiready = function() {

        // 实例化vue  渲染群列表数据
        var group_list = new Vue({
            el: '.app',
            data: {
                group_list: []
            },
            mounted: function() {

              var $_this = this;

              $_this.get_group_list();

            },
            methods: {

                // 获取群列表数据
                get_group_list: function() {
                    var $_this = this;
                    api.ajax({
                        url: window.Url.Community_groupchatList,
                        method: 'post',
                        data: {
                            values: {
                                token: $api.getStorage('user_data').token,
                                keywords: ""
                            }
                        }
                    }, function(ret, err) {
                        if (ret) {
                            // console.log("获取到的群列表数据---"+JSON.stringify(ret));
                            if(ret.re==1){
                              $_this.group_list = ret.data.list;
                            }
                        } else {
                            alert(JSON.stringify(err));
                        }
                    });

                }

            }

        })

    };



    // 打开对应的聊天窗口
    function open_chat_win(type,group_chat_id, group_chat_name) {
      // alert(group_chat_id)
        api.openWin({
            name: type + '_chat_header',
            url: 'four_headers/' + type + '_chat_header.html',
            pageParam: {
                group_chat_id: group_chat_id,
                group_chat_name:group_chat_name,
                num:2
            }
        });

    }
</script>

</html>
